<!-- 模板 -->
<template>
  <div class="searchList">
    <!-- 1.头部 -->
    <div class="header">
      <van-icon
        name="arrow-left"
        class="head-left-icon"
        @click="$router.go(-1)"
      />
    </div>
    <MyHeader> </MyHeader>
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <ul>
        <li v-for="item in searchList" :key="item.id">
          <div class="img"><img :src="item.imgUrl" alt="" /></div>
          <div class="text">
            <div>
              <span>{{ item.name }}</span>
              <span class="custom">{{ item.custom }}</span>
            </div>
            <span class="price"><i>¥ </i>{{ item.price }}</span>
          </div>
        </li>
      </ul>
      <div class="total">共查询到 {{ total }} 条数据</div>
    </van-list>
  </div>
</template>
<script>
// import request from '../utils/request.js'
import MyHeader from "./MyHeader.vue";
export default {
  name: "",
  data() {
    return {
      searchList: [],
      loading: false,
      finished: false,
      total: 0,
    };
  },
  props: [],
  components: {
    MyHeader,
  },
  computed: {},
  filters: {},
  methods: {
    getSearch() {
      let str = sessionStorage.getItem("search-list");
      if (!str) {
        return;
      }
      console.log(555);
      this.total = JSON.parse(str).total;
      this.searchList = JSON.parse(str).data;
      console.log(this.searchList);
    },
    onLoad() {
      console.log(11);
      this.getSearch();
      this.loading = false;
      this.finished = true;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    },
  },
  created() {},
  mounted() {
    this.getSearch();
  },
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.searchList {
  margin-top: 0.88rem;
}
.header {
  position: fixed;
  width: 100%;
  height: 0.88rem;
  left: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  background: #fff;
  z-index: 999;
  .head-left-icon {
    padding-left: 0.2rem;
    font-size: 0.5rem;
    color: #aaa;
  }
}
ul {
  padding: 0.2rem;
  li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d1d1d1;
    .img {
      padding: 0.2rem;
      width: 40%;
      border-radius: 0.2rem;
      img {
        // padding: 0.2rem;
        width: 100%;
        border-radius: 0.2rem;
      }
    }
    .text {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 1.59rem;
      font-size: 0.28rem;
      div {
        display: flex;
        flex-direction: column;
        // height: 50%;
        .custom {
          padding-top: 0.1rem;
          color: #d1d1d1;
          font-size: 0.24rem;
        }
      }
      .price {
        color: rgb(185, 3, 3);
      }
    }
  }
}
.total {
  width: 100%;
  text-align: center;
  font-size: 0.28rem;
  color: #d1d1d1;
}
</style>
